<template>
	<view style="margin: 20px;">
		<view class="headerCard">
			<uni-forms :value="formData" ref="formData" style="padding: 10px;">
				<uni-forms-item label="判级时间：" name="time">
					<uni-datetime-picker v-model="formData.time" type="daterange" />
				</uni-forms-item>
				<uni-forms-item label="过磅单号：" name="poundsNo">
					<uni-easyinput type="number" v-model="formData.poundsNo" placeholder="请输入过磅单号" />
				</uni-forms-item>
				<uni-forms-item label="车牌号：" name="carNo">
					<uni-easyinput type="number" v-model="formData.carNo" placeholder="请输入车牌号" />
				</uni-forms-item>
				<uni-forms-item label="提交状态：" name="state">
					<uni-data-select v-model="formData.state" :localdata="stateList"></uni-data-select>
				</uni-forms-item>
			</uni-forms>
			<view class="button-group">
				<button type="primary" plain="true" size="mini" @click="resetForm">重置</button>
				<button type="primary" plain="true" size="mini" @click="touchUpper()">查询</button>
			</view>
		</view>
		<scroll-view scroll-y="true" class="contents" @scrolltolower="touchLower" @scrolltoupper="touchUpper">
			<view class="footerCard" v-for="(item, index) in receiptList" :key="index">
				<view class="footerContent">
					<view class="margin">过磅单号：{{item.poundsNo}}</view>
					<view class="margin">车牌号：{{item.carNo}}</view>
					<view class="margin">物料：{{item.specs}}</view>
					<view class="margin">判级状态：<text v-if="item.regState == 0">判级中</text>
					<text v-else-if="item.regState == 1" style="color:green;">结束</text>
					<text v-else-if="item.regState == 2" style="color:blue;">完成</text>
					<text v-else-if="item.regState == 3" style="color:red;">异常</text>
					</view>
					<view class="margin">判级时间：{{item.judgingTime}}</view>
				</view>

				<view class="button-group">
					<button type="primary" plain="true" v-if="item.regState == 1 && item.submitState == 0" size="mini" @click="scrapClick(item)">废钢评定</button>
					<button type="primary" plain="true" size="mini" @click="photoClick(item)">照片列表</button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import receipList from "@/common/ReceiptList.js"
	export default {
		data() {
			return {
				formData: {
					time: [],
					state: null,
					poundsNo: null,
					carNo: null
				},
				page: {
					total: 0,
					pageSize: 8,
					currPage: 1
				},
				receiptList: [],
				stateList: [{
						value: 0,
						text: '已提交'
					},
					{
						value: 1,
						text: '未提交'
					},
				]
			}
		},
		onShow() {
			this.touchUpper();
		},
		methods: {
			resetForm() {
				this.$refs.formData.resetFields();
			},
			touchUpper() {
				this.page.pageIndex = 1;
				this.receiptList = [];
				this.getReceiptList();
			},
			touchLower() {
				if (this.page.pageIndex < this.page.total) {
					this.page.pageIndex++;
					this.getReceiptList();
				}
			},
			getReceiptList() {
				let param = {
					pageNum: this.page.currPage,
					pageSize: this.page.pageSize
				};
				if (this.formData.time[0]) {
					param["startDate"] = this.formData.time[0];
				}
				if (this.formData.time[1]) {
					param["endDate"] = this.formData.time[1];
				}
				for (let item in this.formData) {
					if (item != "time" && this.formData[item]) {
						param[item] = this.formData[item];
					}
				}
				// uni.showLoading({
				// 	title: '加载中'
				// });
				receipList.getReceiptList(param).then(res => {
					// uni.hideLoading();
					// console.log(res);
					if (null != res && res.code == 0 && null != res.data) {
						console.log(res);
						this.receiptList.push(...res.data.records);
						this.page.total = res.data.total;
					}
				}).catch(customerEx => {
					console.log(customerEx);
				});
			},
			// 废钢评定
			scrapClick(item) {
				uni.navigateTo({
					url: '../ReceipList/ScrapEvaluation?item=' + JSON.stringify(item)
				});
			},
			// 照片列表
			photoClick(item) {
				uni.navigateTo({
					url: '../ReceipList/PhotoList?poundsNo=' + item.poundsNo
				});
			}
		}
	}
</script>

<style>
	.headerCard {
		border: 1px solid #eaeaea;
		width: 100%;
	}

	/deep/.uni-forms-item__label {
		width: 80px !important;
	}

	.contents {
		height: 1000upx;
	}

	/deep/.uni-date {
		width: 220px !important;
	}

	/deep/.uni-date__x-input {
		height: 36px !important;
	}

	/deep/.uni-easyinput {
		width: 220px !important;
	}

	/deep/.uni-select {
		width: 220px !important;
	}

	/deep/.uni-stat__select {
		padding: 0 !important;
	}

	/deep/.uni-select__input-box {
		width: 200px !important;
	}

	/deep/.uni-forms-item__inner {
		padding-bottom: 10px !important;
	}

	.button-group {
		margin-bottom: 10px;
		display: flex;
		justify-content: space-around;
	}

	.margin {
		margin: 0 20px 10px 0;
		width: 100%;
	}

	.footerCard {
		border: 1px solid #eaeaea;
		width: 100%;
		margin-top: 10px;
	}

	.footerContent {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 10px;
	}
</style>
